import React from "react";
import {
  Input,
  InputGroup,
  Stack,
  Button,
  InputLeftElement,
  Text,
} from "@chakra-ui/core";
import { FaUserAlt, FaLock, FaPhone } from "react-icons/fa";

export default function SignUp() {
  return (
    <form>
      <Stack spacing="2" mt="30px">
        <InputGroup>
          <InputLeftElement
            pointerEvents="none"
            children={<FaUserAlt color="gray.300" />}
          />
          <Input type="text" placeholder="你的昵称" />
        </InputGroup>
        <InputGroup>
          <InputLeftElement
            pointerEvents="none"
            children={<FaPhone color="gray.300" />}
          />
          <Input type="text" placeholder="手机号" />
        </InputGroup>
        <InputGroup>
          <InputLeftElement
            pointerEvents="none"
            children={<FaLock color="gray.300" />}
          />
          <Input type="password" placeholder="密码" />
        </InputGroup>
        <Stack spacing="20"></Stack>
        <Button
          _hover={{ bgColor: "tomato" }}
          w="100%"
          colorScheme="green"
          borderRadius="25px"
        >
          注册
        </Button>
        <Text fontSize="12px" color="#969696">
          点击 “注册” 即表示您同意并愿意遵守简书
        </Text>
        <Text fontSize="12px" color="#969696">
          <Text as="a" cursor="pointer" color="blue">
            用户协议
          </Text>
          和
          <Text as="a" cursor="pointer" color="blue">
            隐私政策
          </Text>
          。
        </Text>
      </Stack>
    </form>
  );
}
